<template>
  <div class="common-layout">
    <el-container>
      <el-header style="min-height: 6vh; margin-top: 1vh">
        <div class="header-content common-div-card">
          <el-form :model="headerSearchForm" label-width="auto" :inline="true">
            <el-form-item label="原卷号">
              <el-input v-model="headerSearchForm.entId" placeholder="请输入卷号" />
            </el-form-item>
            <el-form-item label="钢种类型">
              <el-input v-model="headerSearchForm.steelGrade" placeholder="请输入钢种类型" />
            </el-form-item>
            <el-form-item label="重量不符标识">
              <el-select v-model="headerSearchForm.wtMisMatchFlag" clearable style="width: 160px">
                <el-option label="全部" value="" />
                <el-option label="正常" value="0" />
                <el-option label="不符" value="1" />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="handleSearch">查询</el-button>
              <el-button type="primary" @click="handleReset">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-header>
      <el-main>
        <el-tabs v-model="activeTab" class="tabs" @tab-click="handleTabClick">
          <el-tab-pane label="酸轧TCM2280" name="tcm2280" />
          <el-tab-pane label="连退CAL1630" name="cal1630" />
          <el-tab-pane label="连退CAL2150" name="cal2150" />
          <el-tab-pane label="镀锌CGL1870" name="cgl1870" />
        </el-tabs>
        <div class="table-container common-div-card">
          <el-table
            :data="tableData"
            :header-cell-style="{ background: '#eef1f6', color: '#606266', textAlign: 'center' }"
            :cell-style="{ textAlign: 'center' }"
            v-loading="loading"
            ref="tableRef"
            :row-class-name="rowClassName"
            :show-overflow-tooltip="true"
          >
            <el-table-column label="序号" fixed="left" type="index" width="60px" />
            <el-table-column prop="hotCoildNo" label="热轧卷号" />
            <el-table-column prop="source" label="材料来源" />
            <el-table-column prop="steelGrade" label="短牌号" />
            <el-table-column prop="fullSteelGrade" label="长牌号" />
            <el-table-column prop="orderNo" label="合同号" />
            <el-table-column prop="finalUse" label="最终用途" />
            <el-table-column prop="customer" label="订货用户" />
            <el-table-column prop="remark" label="销售备注" />
            <el-table-column prop="finalUser" label="最终用户" />
            <el-table-column prop="standard" label="产品标准" />
            <el-table-column prop="specificationCode" label="产品规范码" />
            <el-table-column prop="precisionCode" label="精度代码" />
            <el-table-column prop="orderThickness" label="订货厚度" />
            <el-table-column prop="orderThickLower" label="订货成品厚度下限" />
            <el-table-column prop="orderThickUpper" label="订货成品厚度上限" />
            <el-table-column prop="productThicknessMiddle" label="成品厚度中线" />
            <el-table-column prop="specialThickness" label="特殊厚度公差提示" />
            <el-table-column prop="highPrecision" label="高精度提示" />
            <el-table-column prop="productMachine" label="成品机组" />
            <el-table-column prop="productMachineReduction" label="成品机组历史减薄量" />
            <el-table-column prop="hotCoilDesignMiddle" label="酸轧机组设计中线" />
            <el-table-column prop="hotCoilCalculationMiddle" label="酸轧机组计算中线" />
            <el-table-column prop="calEntOffsetTip" label="连退入口偏差提示" v-if="activeTab === 'cal1630' || activeTab === 'cal2150'" />
            <el-table-column prop="tcmEntOffsetTip" label="酸轧入口偏差提示" v-if="activeTab === 'tcm2280'" />
            <el-table-column prop="cglEntOffsetTip" label="镀锌入口偏差提示" v-if="activeTab === 'cgl1870'" />
            <el-table-column prop="orderWidth" label="订货宽度" />
            <el-table-column prop="orderProductWidthUpper" label="订货成品宽度上限" />
            <el-table-column prop="specialWidth" label="特殊宽度公差提示" />
            <el-table-column prop="tcmSourceWidth" label="酸轧机组来料宽度" />
            <el-table-column prop="trimFlag" label="切边标记" />
            <el-table-column prop="trimSurplus" label="切边余量" />
            <el-table-column prop="riskReminder" label="风险提醒" />
          </el-table>
        </div>
        <div class="pagination common-div-card">
          <el-pagination
            v-model:current-page="pagination.currentPage"
            v-model:page-size="pagination.pageSize"
            :page-sizes="[10, 20, 30, 50]"
            :total="pagination.total"
            layout="total, sizes, prev, pager, next"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </el-main>
    </el-container>
  </div>
</template>
<script setup lang="ts">
  import { ref, reactive, onMounted, onUnmounted, nextTick, defineComponent } from 'vue';
  import { ElMessage, ElMessageBox, ElTable, TabsPaneContext } from 'element-plus';

  const rowClassName = ({ row }: { row: any }) => {
    let hasWarning = false;
    return hasWarning ? 'warning-row' : '';
  };

  const activeTab = ref('tcm2280');
  const handleTabClick = (tab: TabsPaneContext, event: Event) => {
    const name = String(tab.paneName ?? '');
    activeTab.value = name;
  };

  interface SearchForm {
    entId: string;
    steelGrade: string;
    wtMisMatchFlag: string;
  }
  // 表单数据
  const headerSearchForm = reactive<SearchForm>({
    entId: '',
    steelGrade: '',
    wtMisMatchFlag: '',
  });

  // 表格数据
  const tableData = ref<any>([]);
  const tableRef = ref<InstanceType<typeof ElTable>>();
  const loading = ref(false);

  // 分页数据
  const pagination = reactive({
    currentPage: 1,
    pageSize: 10,
    total: 0,
  });

  // 获取表格数据
  const fetchTableData = async () => {
    loading.value = true;
    try {
      const param = {
        page: {
          pageIndex: pagination.currentPage,
          pageSize: pagination.pageSize,
        },
        dto: {
          entId: headerSearchForm.entId,
          steelGrade: headerSearchForm.steelGrade,
          wtMisMatchFlag: headerSearchForm.wtMisMatchFlag,
        },
      };
      // const res = await api.page(param);
      // tableData.value = res.data.data.records;
      // pagination.total = res.data.count;
      loading.value = false;
    } catch (error) {
      loading.value = false;
      ElMessage.error('获取数据失败');
    }
  };

  // 查询方法
  const handleSearch = () => {
    pagination.currentPage = 1;
    fetchTableData();
  };

  // 重置方法
  const handleReset = () => {
    (Object.keys(headerSearchForm) as Array<keyof SearchForm>).forEach((key) => {
      headerSearchForm[key] = '';
    });
    handleSearch();
  };

  // 分页大小变化
  const handleSizeChange = (val: number) => {
    pagination.pageSize = val;
    fetchTableData();
  };

  // 页码变化
  const handleCurrentChange = (val: number) => {
    pagination.currentPage = val;
    fetchTableData();
  };

  // 生命周期钩子
  onMounted(() => {
    fetchTableData();
  });

  onUnmounted(() => {});
</script>
<style lang="less" scoped>
  @border-radius: 8px;
  @primary-color: #2c69e8;
  @box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  @box-shadow-hover: 0 8px 32px rgba(0, 0, 0, 0.12);
  @border: 1px solid #dcdfe6;

  .common-div-card {
    box-shadow: @box-shadow;
    transition: 0.3s;
    border-radius: @border-radius;
    border: @border;

    // 悬停状态
    &:hover {
      box-shadow: @box-shadow-hover;
    }
  }

  .common-layout {
    width: 99vw;
    min-height: 100vh;
    background-color: #fff;
  }

  .header-content {
    display: flex;
    justify-content: flex-start;
    padding: 1rem 1rem 0 1rem;
    // min-height: 8vh;
    // .el-form {
    //   margin-top: 2vh;
    // }
  }

  .table-container {
    padding: 0.5rem;
    height: 70vh;

    :deep(.el-table) {
      height: 100%;
      max-width: 100%;
    }
  }

  .pagination {
    margin-top: 2vh;
    display: flex;
    justify-content: flex-end;
    padding: 10px 0;
  }

  .warning-row {
    background-color: '#ffe6e6';
  }
</style>
